<template>
  <MyTable
    :tableData="tableData"
    :columns="columns"
    rowKey="id"
    useBorder
    :useExpand="true"
    :pagination="pagination"
  >
    <template #custom="{ record }">
      <a-table
        :dataSource="record.chil"
        rowKey="id"
        :pagination="{ hideOnSinglePage: true }"
        :columns="itemColumns"
      />
    </template>
  </MyTable>
  <a-drawer
    v-model:visible="recordVisible"
    title="协会预算使用记录"
    placement="right"
    :bodyStyle="{ padding: 0 }"
    width="85%"
  >
    <MyRecordTable></MyRecordTable>
  </a-drawer>
  <a-drawer
    v-model:visible="listVisible"
    title="专项经费列表"
    placement="right"
    :bodyStyle="{ padding: 0 }"
    width="85%"
  >
    <MyBudgetAprove></MyBudgetAprove>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref, onMounted, h } from "vue";
import { Tag, PaginationProps } from "ant-design-vue";
import MyTable from "@/components/CommonDai/Table.vue";
import MyRecordTable from "../../../expense/expenseRecord.vue";
import MyBudgetAprove from "../../budgetAprove.vue";
import { getAssociationList } from "../../api";
onMounted(() => {
  getAssociationList({ page: 1, size: 50 }).then((res: any) => {
    pagination.value.total = res.result.total;
    tableData.value = res.result.records.map((item: any) => {
      return {
        ...item,
        chil: [
          {
            id: item.id + item.name,
            name: item.name,
            yusuan: 5000,
            yishiyong: 4000,
            shengyu: 1000,
          },
        ],
      };
    });
    console.log(tableData.value);
  });
});
const listVisible = ref(false);
const recordVisible = ref(false);
const getRecordId = ref("");
const tableData = ref([]);
const columns = ref([
  {
    title: "协会名称",
    dataIndex: "name",
    isShow: true,
    align: "center",
    width: 300,
  },
  {
    title: "协会通用预算",
    dataIndex: "budget",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return text ? "" : h(Tag, { color: "orange" }, () => "10万元");
    },
  },
  {
    title: "通用已使用预算",
    dataIndex: "budget",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return text ? "" : h(Tag, { color: "green" }, () => "3万元");
    },
  },
  {
    title: "通用剩余预算",
    dataIndex: "budget",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return text ? "" : h(Tag, { color: "blue" }, () => "7万元");
    },
  },
  {
    title: "操作",
    dataIndex: "action",
    isShow: true,
    align: "center",
    width: 230,
    customRender: ({ record }: any) => {
      return h(
        "span",
        { style: { display: "flex", justifyContent: "space-between" } },
        [
          h(
            "a",
            {
              onClick: () => {
                recordVisible.value = true;
                getRecordId.value = record.id;
              },
            },
            "查询使用记录"
          ),
          h(
            "a",
            {
              onClick: () => {
                listVisible.value = true;
                getRecordId.value = record.id;
              },
            },
            "专项经费列表"
          ),
        ]
      );
    },
  },
]);
const itemColumns = ref([
  {
    title: "协会名称",
    dataIndex: "name",
    isShow: true,
    align: "center",
    width: 300,
  },
  {
    title: "协会专项预算",
    dataIndex: "yusuan",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return h(Tag, { color: "orange" }, () => text);
    },
  },
  {
    title: "专项已使用预算",
    dataIndex: "yishiyong",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return h(Tag, { color: "green" }, () => text);
    },
  },
  {
    title: "专项剩余预算",
    dataIndex: "shengyu",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return h(Tag, { color: "blue" }, () => text);
    },
  },
  {
    title: "",
    dataIndex: "null",
    isShow: true,
    align: "center",
    customRender: () => {
      return "";
    },
    width: 230,
  },
]);
const pagination = ref<PaginationProps>({
  current: 1,
  pageSize: 10,
  total: 0,
  onChange: (page: number, pageSize: number) => {
    pagination.value.current = page;
    pagination.value.pageSize = pageSize;
  },
});

// 分配预算弹窗功能
// const convertLimit = (arg: number) => {
//   if (!arg) {
//     return undefined;
//   }
//   if (arg.toString().length >= 13) {
//     const volume = arg / 1000000000000;
//     const realVal = parseFloat(volume + "").toFixed(2);
//     return realVal + "万亿";
//   } else if (arg.toString().length >= 9) {
//     const volume = arg / 100000000;
//     const realVal = parseFloat(volume + "").toFixed(2);
//     return realVal + "亿";
//   } else if (arg.toString().length >= 5) {
//     const volume = arg / 10000;
//     const realVal = parseFloat(volume + "").toFixed(2);
//     return realVal + "万";
//   } else {
//     return arg;
//   }
// };
</script>

<style scoped lang="less">
:deep(svg) {
  vertical-align: middle;
}
</style>
